<template>
  <section class="data_section">
    <div class="grid-box" v-if="permissions['billQuantity']">
      <grid gridTitle="财务统计" :columns="billColumns" :multi="false" :url="billUrl" height="200" :queryEntity="queryEntity" :pagination="false">
      </grid>
    </div>
    <div class="grid-box" v-if="permissions['odayBusinessQuantity']">
      <grid gridTitle="今日加工数量统计" :columns="businessQuantityColumns" :multi="false" :url="todayBusinessQuantityUrl" height="200" :queryEntity="queryEntity" :pagination="false">
      </grid>
    </div>
    <div class="grid-box" v-if="permissions['monthBusinessQuantity']">
      <grid gridTitle="本月加工数量统计" :columns="businessQuantityColumns" :multi="false" :url="monthBusinessQuantityUrl" height="200" :queryEntity="queryEntity" :pagination="false">
      </grid>
    </div>
    <div class="grid-box" v-if="permissions['businessGroup']">
      <grid gridTitle="今日加工单统计" :columns="businessColumns" :multi="false" :url="businessGroupUrl" height="200" :queryEntity="queryEntity" :pagination="false"></grid>
    </div>
    <div class="grid-box" v-if="permissions['wmsOrder']">
      <grid gridTitle="今日出入库统计" :columns="wmsOrderColumns" :multi="false" :url="wmsOrderUrl" height="200" :queryEntity="queryEntity" :pagination="false"></grid>
    </div>
  </section>
</template>
<script>
import request from '@/router/axios'
import url from '@/const/apiURL'
import { mapGetters } from 'vuex'
import grid from '@/components/Grid'

export default {
  components: { grid },
  data () {
    return {
      thisDate: new Date(),
      queryEntity: { key: 'key' },
      billUrl: url.FINA_BILL_COUNT_ALL_URL,
      wmsOrderUrl: url.INDEX_WMS_ORDER_URL,
      businessGroupUrl: url.INDEX_BUSINESS_GROUP_URL,
      todayBusinessQuantityUrl: url.INDEX_BUSINESS_TODAY_URL,
      monthBusinessQuantityUrl: url.INDEX_BUSINESS_MONTH_URL,
      billColumns: [
        { label: '类型', width: 80, prop: 'typeName', align: 'center' },
        { label: '币种', width: 80, prop: 'currency', align: 'center' },
        { label: '实际金额', width: 120, prop: 'amount', align: 'center' },
        { label: '完成金额', width: 120, prop: 'payAmount', align: 'center' }
      ],
      wmsOrderColumns: [
        { label: '类型', width: 100, prop: 'name', align: 'center' },
        { label: '数量', width: 120, prop: 'count', align: 'center' }
      ],
      businessColumns: [
        { label: '工序', width: 140, prop: 'stepName', align: 'center' },
        { label: '出库单数', width: 120, prop: 'outCount', align: 'center' },
        { label: '入库单数', width: 120, prop: 'inCount', align: 'center' }
      ],
      businessQuantityColumns: [
        { label: '工序', width: 140, prop: 'stepName', align: 'center' },
        { label: '出库数量', width: 120, prop: 'outCount', align: 'center' },
        { label: '入库数量', width: 120, prop: 'inCount', align: 'center' }
      ]
    }
  },
  computed: {
    ...mapGetters([
      'permissions'
    ])
  },
  created () {
    this.init()
  },
  methods: {
    init () {

    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.date-box {
  width: 92%;
  min-height: 100px;
  float: left;
  height: 650px;
}
.grid-box {
  width: 45%;
  min-height: 100px;
  float: left;
  padding: 5px;
  height: 250px;
}
</style>
